<script setup lang="ts">
import PanelGroup from './components/PanelGroup.vue'
import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
import { Echart } from '@/components/Echart'
import { pieOptions, barOptions, lineOptions } from '../echarts-data'
import { ref, reactive } from 'vue'
import { getCoursePur } from '@/api/course'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useI18n } from '@/hooks/web/useI18n'
import { Search } from '@/components/Search'
import { FormSchema } from '@/types/form'

//t代表国际化
const { t } = useI18n()
//这个如果为true加载的时候会转圈
const loading = ref(true)

const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

let shipingdingdan = ref<string>('0');
let yiwancheng = ref<string>('0');
let shuju = ref<object>();

// 日活跃量
const getDianzan = async (a) => {
  const res = await getCoursePur(a).catch(() => {})
  if (res) {
    set(
            barOptionsData,
            'xAxis.data',
            res.data.dayData
    )
    set(barOptionsData, 'series', [
      {
        name: t('analysis.activeQuantity'),
        data: res.data.day,
        type: 'bar',
      }
    ])
  }
  shipingdingdan.value = res.data.total
  yiwancheng.value = res.data.total1
  console.log(res.data)
  shuju.value = res.data
}

const getAllApi = async () => {
  await Promise.all([getDianzan({'name':'CoursePurchaseStatistics'})])
  loading.value = false
}
let num = ref<number>(1);

const today = () => {
  num.value = 1;
  set(
          barOptionsData,
          'xAxis.data',
          shuju.value.dayData
  )
  set(barOptionsData, 'series', [
    {
      name: t('analysis.activeQuantity'),
      data: shuju.value.day,
      type: 'bar',
    }
  ])
}

const toweek = () => {
  num.value = 2;
  set(
          barOptionsData,
          'xAxis.data',
          shuju.value.weekData
  )
  set(barOptionsData, 'series', [
    {
      name: t('analysis.activeQuantity'),
      data: shuju.value.week,
      type: 'bar',
    }
  ])
}

const tomonth = () => {
  num.value = 3;
  set(
          barOptionsData,
          'xAxis.data',
          shuju.value.monthData
  )
  set(barOptionsData, 'series', [
    {
      name: t('analysis.activeQuantity'),
      data: shuju.value.month,
      type: 'bar',
    }
  ])
}
getAllApi()
</script>

<template>
  <PanelGroup />
  <div style="width: 100%;">
    <table class="tab" border="1">
      <tr style="height: 60px;background-color: white">
        <td style="border: 1px solid #E6E6E6">总视频订单量</td>
        <td style="border: 1px solid #E6E6E6;width: 150px;color: red;">{{shipingdingdan}}</td>
        <td style="border: 1px solid #E6E6E6">已完成视频订单量</td>
        <td style="border: 1px solid #E6E6E6;width: 150px;color: red">{{yiwancheng}}</td>
      </tr>
    </table>
  </div>
  <div>
    <div>{{ message }}</div>
    <ul>
      <li>
        <button @click="tomonth">本月</button>
        <span class="xiaxian" v-if="num == 3"></span>
      </li>
      <li @click="toweek">
        <button>本周</button>
        <span class="xiaxian" v-if="num == 2"></span>
      </li>
      <li>
        <button @click="today">今日</button>
        <span class="xiaxian" v-if="num == 1"></span>
      </li>
    </ul>
  </div>
  <div style="clear: both"></div>
  <ElRow :gutter="20" justify="space-between">
    <ElCol :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="barOptionsData" :height="500"/>
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </ElRow>
</template>

<style lang="less" scoped>
  .xiaxian{
    height: 3px;
    display:block;
    background: #447bf3;
    margin-top: 5px;
  }
  ul li{
    float: right;
    padding: 0px 30px 0px 20px;
  }
  .tab{
    width:99%;
    border:1px solid #E6E6E6;
    text-align: center;
    margin-bottom: 10px;
  }
  .leixing{
    height: 41px;
    text-align: center;
    line-height: 41px;
  }
  .kecheng{
    display: inline-block;
    padding: 10px;
    border: 1px solid #E7E7E7;
  }
  .coursename{
    display: block;
    line-height: 40px;
    padding: 0px 25px 0px 25px;
    text-align: center;
  }
  .look{
    display: block;
    line-height: 40px;
    padding: 0px 25px 0px 25px;
    text-align: center;
    background-color: #F1F1F1;
  }
  .tab{
    width:100%;
  }
  .tab_tr{
    height:80px;
    background-color:#F9FAFC;
    display: inline-block;
    border: 1px solid #E7E7E7;
    margin-bottom: 10px;
  }
  .zt{
    background-color: white;
    height: 50px;
    font:18px/50px "微软雅黑";
    font-weight: bold;
    padding-left: 40px;
    border: 1px solid #E6E6E6;
  }
  .zt2{
    background-color: white;
    height: 50px;
    font:18px/65px "微软雅黑";
    padding-left: 40px;
    margin-bottom: 20px;
  }
</style>
